<template>
	<view>
		<view>
			<view :style="'height: ' + HMfilterHeight + 'px'">
				<HM-filterDropdown id="HMfilter" :menuTop="0" :filterData="filterData" :defaultSelected="null"
					:updateMenuName="true" @confirm="confirm" dataFormat="Object"></HM-filterDropdown>
			</view>

<!-- 			<view class="choice-bar">
				<view class="nav-choice" :class="isActive[index]" v-for="(value,index) in navChoice" :key="index"
					@click="changeActive(index)">{{value}}</view>
			</view> -->
			<application-record v-for="(item,index) in recordList" :key="index"
				:company="item.title" :building="item.building" :time="item.time"
				:goods="item.outline" :state="item.state" @getClick="checkDetails(item)"></application-record>
		    <view v-show="isLoadMore"> 
			  	<uni-load-more :status="loadStatus" ></uni-load-more>
		    </view>
		</view>
	</view>
</template>

<script>
	import {
		ONLINE_SERVER_ADDRESS_BASE_2,
		syncGetOrderList,
	} from "../../../util/network.js"
	export default{
		data() {
			return {
				token:'',
				choosedState : '待确认',
				navChoice: ['待处理','已处理','办理中','待反馈','全部'],
				isActive: ['active-choice','nav-choice','nav-choice','nav-choice','nav-choice'],
				activeIndex: 0,
				userId:'',         //用户账号
				recordList:[],     //工单列表
				pageNo:1,
				pageSize:10,
				states:[0,1],
				loadStatus:'loading',  //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
				isLoadMore:false,  //是否加载中
				filterData:[
					{
						"name":'全部楼盘',
						"type": 'hierarchy-column',
						"submenu": [{
								"name": '全部楼盘',
								"value": 0,
								}
							]
					},
				],
				buildId:0,
				floorId:0,
				HMfilterDropdownTop:45,
				HMfilterHeight:45,
			}
		},
		onNavigationBarButtonTap(){
			console.log("[info]","导航栏按钮触发监听")
			uni.navigateTo({
				url:'../details/details?id=待分配' + '&state=' + '待申请'
			})
		},
		onReachBottom() {
			if(!this.isLoadMore){
				this.isLoadMore=true
				this.pageNo+=1
				this.getOrderByState()
			}
		},
		methods: {
			confirm(e) {
				console.log(e.index);
				console.log(e.value);
				this.buildId = e.value[0][0]
				this.floorId = e.value[0][1]
				this.pageNo = 1
				this.pageSize = 10
				this.recordList=[]
				this.getOrderByState()
				// let tempList = e.value
				// if(this.activeIndex == 0){
				// 	this.areaId = tempList[0][1]
				// 	this.industryId = tempList[0][0]
				// 	this.getCompanyList()
				// }else{
				// 	this.areaId = tempList[0][0]
				// 	this.buildId = tempList[0][1]
				// 	this.getRuleList()
				// }
			},
			/*
			功能：根据单号展示工单详细页面
			参数：
			orderNum：工单号
			state：工单当前状态
		    */
		   
			getBuildFilter(){
				this.areaId = 0
				this.buildId = 0
				this.filterData = [
					{
						"name":'全部楼盘',
						"type": 'hierarchy-column',
						"submenu": [{
								"name": '全部楼盘',
								"value": null,
								}
							]
					},
				]
				let _this = this
				uni.request({
					url:`${ONLINE_SERVER_ADDRESS_BASE_2}/qzw-building/all-city-build`,
					method:'GET',
					success: function (res) {
						console.log("楼盘信息", res)
						if(res.data.code == 200){
							let myInfo = uni.getStorageSync('currentUser')
							let temp = res.data.data
							temp.forEach((item,index) => {
								if(item.buildCityAreaId == myInfo.area_id){
									let buildTemp = {
										"name": item.buildName,
										"value": item.buildId,
										"submenu": [{
												"name": '全部楼层',
												"value": '',
												}
											]
									}
									for (var i = 1; i <= item.buildFloor; i++) {
										var floorTemp = {
												"name": i.toString() + '层',
												"value": i,
												}
										buildTemp.submenu.push(floorTemp)
									}
									_this.filterData[0].submenu.push(buildTemp)
								}
							})
							console.log('filter',_this.filterData)
							// _this.getRuleList()
							try{
			
							}catch(e){
								//TODO handle the exception
							}
						}
					}
				})
			},
			checkDetails(item) {
				if(item.electricityStr == null || item.electricityStr == ''){
					item.electricityStr = '未录入'
				}
				uni.navigateTo({
					url:'../details/details?id=' + item.orderNum + "&buildName=" + item.buildName + "&houseFloor=" + item.houseFloor + "&houseNumber=" + item.houseNumber + "&buildId=" + item.buildId + "&water=" + item.water + "&electricity=" + item.electricityStr + "&publicElectricity=" + item.publicElectricity + "&state=" + item.state
				})
			},

			listPush(item){
				let itemTmp = {'orderNum':'','title':'','building':'','time':'',
				'outline':'','status':-1, 'state':''}
				itemTmp.title = "房号：" + item.houseNumber
				itemTmp.houseNumber = item.houseNumber
				itemTmp.orderNum = item.userId
				
				try{
					itemTmp.time = item.ccDate != null ? '抄录日期:' + item.ccDate : '抄录日期:未录入'
				}catch(e){
					//TODO handle the exception
				}
				itemTmp.building = "楼盘：" + item.buildName
				itemTmp.buildName = item.buildName
				itemTmp.buildId = item.buildId
				itemTmp.houseFloor = item.floor
				itemTmp.electricity = 0
				try{
					let electricityArray = JSON.parse(item.electricity)
					electricityArray.forEach(unit => {
						console.log(unit)
						itemTmp.electricity = itemTmp.electricity + Number(unit.amount)
						
					})
					itemTmp.electricity = Math.round(itemTmp.electricity * 100)/100
				}catch(e){
					itemTmp.electricity = 0
				}
				if(item.electricity != null){
					itemTmp.electricityStr = item.electricity
					itemTmp.publicElectricity = item.publicElectricity
				}else{
					itemTmp.electricityStr = item.prevElectricity
					itemTmp.publicElectricity = item.prevPublicElectricity
				}
				if(item.water != null){
					itemTmp.water = item.water
				}else{
					itemTmp.water = item.prevWater
				}
				itemTmp.outline = item.ccDate != null ? '电表读数：' + itemTmp.electricity + '    ' + '水表读数：' + item.water : '电表读数：未录入' + '    ' + '水表读数：未录入'
				itemTmp.status = item.status
				switch(itemTmp.status) {
					 case 0:
						itemTmp.state = "未录入"
						break;
					 case 1:
						itemTmp.state = "未缴费"
						break;
					 case 2:
						itemTmp.state = "已缴费"
						break;
					 default:
						itemTmp.state = "未定义状态"
				} 
				this.recordList.push(itemTmp)
				
			},
			/*
			功能：根据工单类别及状态实时查询工单列表
			参数：
			orderType：工单类别
			state：工单当前状态
		    */
			getOrderByState(){
				let _this = this
				let data = {
					pageNo:this.pageNo,
					pageSize:this.pageSize,
				}
				console.log("buildID",this.buildId)
				if(this.buildId > 0){
					data.buildId = this.buildId
				}
				if(this.floorId > 0){
					data.floor = this.floorId
				}
				uni.request({
					url:`${ONLINE_SERVER_ADDRESS_BASE_2}/meter-cc/with-user-list`,
					header: {
						'Authorization': this.token,
					},
					method:'GET',
					data:data,
					success: function (res) {
						console.log("水电表",res)
						if(res.data.code == 200){
							for (var i = 0; i < res.data.data.meterCcWithUserList.length; i++) {
								_this.listPush(res.data.data.meterCcWithUserList[i])
							}
							if(res.data.data.meterCcWithUserList.length <= 0){
								_this.isLoadMore = false
							}else{
								_this.isLoadMore = false
								_this.loadStatus = 'nomore'
							}
						}
					},
				})
			}
		},
		onLoad(option) {
			this.token = uni.getStorageSync("token")
			this.recordList=[]
			this.pageNo = 1
			this.pageSize = 10
			this.getBuildFilter()
			// this.getOrderByState()
		},
		mounted() {
			console.log("[info]","测试初始化" + uni.getStorageSync('userinfo'))
			if(uni.getStorageSync('userinfo') != null){
				this.token = uni.getStorageSync('token')
			}else{
				uni.navigateTo('../../login/login')
			}

		},
		onShow() {
			this.recordList=[]
			this.pageNo = 1
			this.pageSize = 10
			// this.getBuildFilter()
			this.getOrderByState()
			
		},
		onReady() {
			const query = uni.createSelectorQuery().in(this);
			query.select("#HMfilter").boundingClientRect(data => {
			  console.log("得到布局位置信息" + JSON.stringify(data));
			  console.log("节点离页面顶部的距离为" + data.top);
			  this.HMfilterHeight = data.height
			}).exec();
		}
	}
</script>

<style>
	page{
		background-color: #ffffff
	}
	.nav-choice{
		height: 100rpx;
		width: 150rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		border-bottom: solid 5rpx #F1F1F1;
	}
	.choice-bar{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content:center;
		color: #808080;
	}
	.active-choice{
		height: 100rpx;
		width: 150rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-weight:600;
		color: #DD524D;
		border-bottom: solid 5rpx #DD524D;
	}
</style>
